<template>
	<div style="padding: 0 15px" @click="toggleClick">
		<svg-icon
			class="hamburger"
			:class="{ 'is-active': isActive }"
			icon-class="shrink"
		/>
	</div>
</template>

<script setup lang="ts">
defineProps({
	isActive: {
		required: true,
		type: Boolean,
		default: false
	}
});
const emit = defineEmits(["toggleClick"]);
/**
 * @description: toggleClick
 */
const toggleClick = () => {
	emit("toggleClick");
};
</script>

<style lang="scss" scoped>
.hamburger {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
}

.hamburger.is-active {
	transform: rotate(180deg);
}
</style>
